<script lang="ts" setup>
import { getHealthSX } from '~/api/home'
import { decode, encode } from '~/utils/base/dataEncry'

const router = useRouter()
const TJlist = ref<any[]>([])
const fileData = ref({})
const title = ref('健康陕西')
const routePath = [{ name: '首页', path: '/' }, { name: title, path: '/peopleHealth/healthyShaanxi' }, { name: '健康陕西详情', path: '' }]
const route = useRoute()
function getData() {
  getHealthSX().then((res) => {
    TJlist.value = res.data.slice(0, 3)
  }).catch(() => {
  })
}
function getDetail() {
  const req = {
    condition: [
      {
        colName: 'id',
        ruleType: 'eq',
        value: route.query.id || route.params.id,
      },
    ],
  }
  getHealthSX(req).then((res) => {
    fileData.value = res.data[0]
  })
}
if (route.query.id || route.params.id) {
  getDetail()
}
else if (route.query.data) {
  fileData.value = decode(route.query.data)
}
onMounted(() => {
  getData()
})
function clickItem(item) {
  fileData.value = item
}
const { collectArticleMap } = storeToRefs(useUserStore())
function retrunPath() {

}
</script>

<template>
  <div class="bg-[url('/img/index.png')] bg-#F7F9FD bg-no-repeat">
    <PublicSearch type="健康陕西" />
    <PublicSearchDialog type="健康陕西" />
    <div class="px-40">
      <div class="bg-#fff">
        <CommonPageContainer :title="title" :path="routePath">
          <div class="mt-20px flex justify-between">
            <div class="w-83% bg-#F7F9FD pr-10">
              <div class="w-40% flex items-center p-5 text-size-18px">
                <div
                  class="ml-[-50px] h-40px w-40px flex cursor-pointer items-center justify-center rounded-md" style="
                                background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                  @click="router.back()"
                >
                  <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                    <span class="flex items-center -ml-2px" text="#0E9472">&lt;</span>
                  </div>
                </div>
                <div class="pl-5 text-#0E9472 font-700">
                  {{ title }}
                </div>
              </div>
              <div class="px-15">
                <div class="flex items-center text-size-32px text-#101010 font-500">
                  <span>{{ fileData.title_name }}</span>
                  <ClientOnly>
                    <TextToSpeak :text="`${fileData.title_name}${getTextFromHtml(fileData.contents)}`" :fixed="false" font-size="20px" />
                  </ClientOnly>
                </div>
                <div class="flex py-2">
                  <div class="mr-40px">
                    发布日期：{{ fileData.release_time }}
                  </div>
                  <div>
                    来源: {{ fileData.origin }}
                  </div>
                </div>
                <div v-html="addControlsList(fileData.contents)" />
              </div>
              <div
                v-if="fileData && fileData.id" class="flex items-center justify-center pb-46px pt-65px"
                text="16px #101010"
              >
                <!-- <div class="mr-14px h-42px w-100px flex cursor-pointer items-center justify-center bg-white" @click="onCollect"> -->
                <div
                  class="mr-14px h-42px w-100px flex cursor-pointer items-center justify-center bg-white"
                  @click="changeArticleCollect(fileData.uid)"
                >
                  <!-- <img class="pr-12px" src="/img/black_heart.png" alt=""> -->
                  <i
                    class="i-carbon:favorite-filled mr-12px inline-block text-20px"
                    :class="{ 'text-red': collectArticleMap[fileData.uid], 'text-#555': !collectArticleMap[fileData.uid] }"
                  />
                  <span>{{ collectArticleMap?.[fileData.uid] ? '已收藏' : '收藏' }}</span>
                </div>
                <div
                  class="h-42px w-100px flex cursor-pointer items-center justify-center bg-white"
                  @click="copyUrl"
                >
                  <img class="pr-12px" src="/img/share.png" alt="">
                  分享
                </div>
              </div>
              <CommentSection v-if="fileData.uid && fileData.enable_comments === '是'" :uid="fileData.uid" :title="fileData.title_name" />
            </div>
            <div class="w-15%">
              <div>
                <div
                  class="h-40px flex items-center rounded-tl rounded-tr px-10px py-5px"
                  style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
                >
                  <img src="/img/tj.png" alt="">
                  <div class="pl-15px" text="#fff 16px">
                    推荐
                  </div>
                </div>
                <div class="rounded-bl rounded-br px-10px py-5px" border="2px solid #50bc8d">
                  <div v-for="item in TJlist" class="cursor-pointer" hover="text-#0E9472" @click="clickItem(item)">
                    <img :src="item.cover_file_name" alt="">
                    <div class="py-10px" text="14px">
                      {{ item.title_name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CommonPageContainer>
      </div>
    </div>
  </div>
</template>

<style></style>
